<template>
  <div class="pharmacyMgt pd-20">
    <!--医院列表-->
    <el-table ref="multipleTable_1"
              :data="hospitalList"
              tooltip-effect="dark"
              style="width: 100%"
              height="400"
              @selection-change="handleHospitalSelectionChange">
      <el-table-column align="center"
                       label="医院列表">
        <el-table-column type="selection"
                         :selectable="isBind"
                         width="50">
        </el-table-column>
        <el-table-column label="头像"
                         min-width="50">
          <template slot-scope="scope">
            <el-avatar :size="50">
              <img :src="scope.row.imageUrl" />
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="医院名称"
                         min-width="150">
        </el-table-column>
        <el-table-column prop="sortNum"
                         label="排序号"
                         min-width="50">
        </el-table-column>
        <el-table-column prop="hospitalCenterName"
                         label="中心"
                         min-width="150">
        </el-table-column>
        <el-table-column prop="address"
                         label="地址"
                         min-width="150">
        </el-table-column>
        <el-table-column prop="phone"
                         label="电话"
                         min-width="100">
        </el-table-column>
        <el-table-column min-width="100"
                         align="right">
          <template slot="header"
                    slot-scope="scope">
            <el-input v-model="hospitalName"
                      size="mini"
                      @keyup.enter.native="searchHospitalMethod"
                      placeholder="请输入医院名称搜索..."
                      clearable />
          </template>
        </el-table-column>
      </el-table-column>
      <infinite-loading slot="append"
                        @infinite="handleHospitalMethod"
                        :identifier="infiniteHospital"
                        force-use-infinite-wrapper=".el-table__body-wrapper">
      </infinite-loading>
    </el-table>
    <!--公司列表-->
    <el-table ref="multipleTable_2"
              :data="companyList"
              tooltip-effect="dark"
              style="width: 100%"
              height="400"
              @selection-change="handleCompanySelectionChange"
              class="mt-20">
      <el-table-column align="center"
                       label="公司列表">
        <el-table-column type="selection"
                         width="50">
        </el-table-column>
        <el-table-column label="头像"
                         min-width="50">
          <template slot-scope="scope">
            <el-avatar :size="50">
              <img :src="scope.row.imageUrl" />
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="公司名称"
                         min-width="150">
        </el-table-column>
        <el-table-column prop="sortNum"
                         label="排序号"
                         min-width="50">
        </el-table-column>
        <el-table-column prop="address"
                         label="地址"
                         min-width="150">
        </el-table-column>
        <el-table-column prop="phone"
                         label="电话"
                         min-width="100">
        </el-table-column>
        <el-table-column min-width="100"
                         align="right">
          <template slot="header"
                    slot-scope="scope">
            <el-input v-model="companyName"
                      size="mini"
                      @keyup.enter.native="searchCompanyMethod"
                      placeholder="请输入公司名称搜索..."
                      clearable />
          </template>
        </el-table-column>
      </el-table-column>
      <infinite-loading slot="append"
                        @infinite="handleCompanyMethod"
                        :identifier="infiniteCompany"
                        force-use-infinite-wrapper=".el-table__body-wrapper">
      </infinite-loading>
    </el-table>
    <el-button style="width: 100%;margin-top: 10px"
               type="primary"
               @click="hospitalBindCompany">绑定
    </el-button>
  </div>
</template>

<script>
  export default {
    name: "pharmacyMgt",
    data () {
      return {
        loading: false,
        hospitalList: [],
        companyList: [],
        hospitalMultipleSelection: [],
        companyMultipleSelection: [],
        params: [],
        pageSize: 20,
        pageIndex_1: 0,
        pageIndex_2: 0,
        hospitalName: '',
        companyName: '',
        infiniteHospital: 0,
        infiniteCompany: 0,
        hospitalState: '',
        companyState: ''
      }
    },
    methods: {
      handleHospitalMethod ($state) {
        this.hospitalState = $state;
        let param = {
          name: this.hospitalName,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex_1
        };
        this.post(this.api.hospitalManager.list, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.pageIndex_1 += 1;
              this.hospitalList = this.hospitalList.concat(res.data.object);
              $state.loaded();
            } else {
              $state.complete();
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      handleCompanyMethod ($state) {
        let param = {
          name: this.companyName,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex_2
        };
        this.post(this.api.getCompanyList, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.pageIndex_2 += 1;
              this.companyList = this.companyList.concat(res.data.object);
              $state.loaded()
            } else {
              $state.complete();
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      searchHospitalMethod () {
        if (this.hospitalName === '') {
          this.pageIndex_1 = 0;
          this.hospitalList = [];
          this.infiniteHospital += 1;
        } else {
          this.pageIndex_1 = 0;
          this.hospitalList = [];
          this.handleHospitalMethod(this.hospitalState)
        }
      },
      searchCompanyMethod () {
        if (this.companyName === '') {
          this.pageIndex_2 = 0;
          this.companyList = [];
          this.infiniteCompany += 1;
        } else {
          this.pageIndex_2 = 0;
          this.companyList = [];
          this.handleCompanyMethod(this.companyState)
        }
      },
      handleHospitalSelectionChange (val) {
        this.hospitalMultipleSelection = val;
      },
      handleCompanySelectionChange (val) {
        this.companyMultipleSelection = val;
      },
      hospitalBindCompany () {
        if (this.companyMultipleSelection.length > 1) {
          this.$message({
            showClose: true,
            message: "只能选择一个公司!",
            type: 'warning'
          })
        } else if (this.companyMultipleSelection.length === 0 || this.hospitalMultipleSelection.length === 0) {
          this.$message({
            showClose: true,
            message: "至少选择一个公司和医院!",
            type: 'warning'
          })
        } else {
          for (let i = 0; i < this.hospitalMultipleSelection.length; i++) {
            let param = {
              id: this.hospitalMultipleSelection[i].id,
              company: this.companyMultipleSelection[0].id
            };
            this.params = this.params.concat(param)
          }
          this.post(this.api.hospitalManager.bindCompany, this.params).then(res => {
            if (res.data.code === '200') {
              this.$message({
                showClose: true,
                message: "绑定成功!",
                type: 'success'
              })
              this.$refs.multipleTable_1.clearSelection();
              this.$refs.multipleTable_2.clearSelection();
            } else {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
            }
          })
        }
      },
      isBind (row) {
        if (row.company) {
          return false
        } else {
          return true
        }
      }
    }
  }
</script>
<style>
</style>
